{% extends "base.html" %}

{% set current_menu = 'system' %}
{% set current_page = 'user_list' %}

{% block title %}系统管理 - 用户管理{% endblock %}



{% block content %}
<div class="container mx-auto">
    <!-- 面包屑导航 -->
    <nav class="text-sm breadcrumbs mb-6">
        <ol class="flex items-center space-x-2">
            <li><a href="{{ url_for('main.home') }}" class="text-gray-500 hover:text-gray-700">首页</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li><a href="{{ url_for('user.user_list') }}" class="text-gray-500 hover:text-gray-700">系统管理</a></li>
            <li><i class="fas fa-chevron-right text-gray-400 text-xs mx-2"></i></li>
            <li class="text-gray-700">用户管理</li>
        </ol>
    </nav>

    <!-- 统计卡片 -->
    <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-blue-100 text-blue-500">
                    <i class="fas fa-users"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">总用户数</p>
                    <p class="text-2xl font-semibold">{{ stats.total }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-green-100 text-green-500">
                    <i class="fas fa-user-check"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">活跃用户</p>
                    <p class="text-2xl font-semibold">{{ stats.active }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-purple-100 text-purple-500">
                    <i class="fas fa-user-shield"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">管理员</p>
                    <p class="text-2xl font-semibold">{{ stats.admins }}</p>
                </div>
            </div>
        </div>
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-center">
                <div class="p-3 rounded-full bg-yellow-100 text-yellow-500">
                    <i class="fas fa-building"></i>
                </div>
                <div class="ml-4">
                    <p class="text-sm font-medium text-gray-500">部门数量</p>
                    <p class="text-2xl font-semibold">{{ stats.departments }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作区域 -->
    <div class="bg-white rounded-lg shadow mb-6">
        <div class="p-4 border-b border-gray-200">
            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                <div class="flex items-center space-x-2 mb-4 md:mb-0">
                    <a href="{{ url_for('user.create_user') }}" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                        <i class="fas fa-plus mr-2"></i>添加用户
                    </a>
                    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition" onclick="showImportModal()">
                        <i class="fas fa-file-import mr-2"></i>批量导入
                    </button>
                    <button class="px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition" onclick="exportUsers()">
                        <i class="fas fa-file-export mr-2"></i>批量导出
                    </button>
                </div>
                <div class="flex items-center space-x-2">
                    <div class="relative">
                        <input type="text" id="search" placeholder="搜索用户姓名、用户名、部门、职位..." 
                               class="pl-10 pr-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent"
                               value="{{ search }}">
                        <div class="absolute left-3 top-2.5 text-gray-400">
                            <i class="fas fa-search"></i>
                        </div>
                    </div>
                    <button id="search-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                        搜索
                    </button>
                </div>
            </div>
        </div>

        <!-- 筛选区域 -->
        <div class="p-4 border-b border-gray-200">
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">部门</label>
                    <select id="department-filter" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">全部部门</option>
                        {% for department in departments %}
                        <option value="{{ department }}" {% if department_filter == department %}selected{% endif %}>{{ department }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">职位</label>
                    <select id="position-filter" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">全部职位</option>
                        {% for position in positions %}
                        <option value="{{ position }}" {% if position_filter == position %}selected{% endif %}>{{ position }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">用户状态</label>
                    <select id="status-filter" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">全部状态</option>
                        <option value="active" {% if status_filter == 'active' %}selected{% endif %}>活跃</option>
                        <option value="inactive" {% if status_filter == 'inactive' %}selected{% endif %}>禁用</option>
                    </select>
                </div>
                <div>
                    <label class="block text-sm font-medium text-gray-700 mb-1">用户角色</label>
                    <select id="role-filter" class="w-full border border-gray-300 rounded-md px-3 py-2 focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent">
                        <option value="">全部角色</option>
                        <option value="admin" {% if role_filter == 'admin' %}selected{% endif %}>管理员</option>
                        <option value="user" {% if role_filter == 'user' %}selected{% endif %}>普通用户</option>
                    </select>
                </div>
            </div>
            <div class="mt-4 flex justify-end">
                <button id="filter-btn" class="px-4 py-2 bg-primary text-white rounded-md hover:bg-blue-600 transition">
                    查询
                </button>
                <button id="reset-btn" class="ml-2 px-4 py-2 bg-white border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 transition">
                    重置
                </button>
            </div>
        </div>

        <!-- 用户列表表格 -->
        <div class="overflow-x-auto">
            <table class="min-w-full divide-y divide-gray-200">
                <thead class="bg-gray-50">
                    <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            <input type="checkbox" id="select-all" class="rounded border-gray-300 text-primary focus:ring-primary">
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            用户姓名
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            用户名
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            部门
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            职位
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            入职时间
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            用户状态
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            用户角色
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            最后登录
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            操作
                        </th>
                    </tr>
                </thead>
                <tbody class="bg-white divide-y divide-gray-200">
                    {% for user in users %}
                    <tr>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <input type="checkbox" class="user-checkbox rounded border-gray-300 text-primary focus:ring-primary" value="{{ user.id }}">
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            <div class="flex items-center">
                                <div class="flex-shrink-0 h-10 w-10">
                                    <div class="h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center">
                                        <span class="text-white font-medium">{{ user.name[0].upper() if user.name else 'U' }}</span>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <div class="text-sm font-medium text-gray-900">{{ user.name }}</div>
                                </div>
                            </div>
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ user.username }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ user.department or '-' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ user.position or '-' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ user.hire_date.strftime('%Y-%m-%d') if user.hire_date else '-' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap">
                            {% if user.is_active %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                                活跃
                            </span>
                            {% else %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                                禁用
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {% if user.role == 'admin' %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-purple-100 text-purple-800">
                                管理员
                            </span>
                            {% else %}
                            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800">
                                普通用户
                            </span>
                            {% endif %}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                            {{ user.last_login.strftime('%Y-%m-%d %H:%M') if user.last_login else '从未登录' }}
                        </td>
                        <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
                            <a href="{{ url_for('user.edit_user', user_id=user.id) }}" class="text-indigo-600 hover:text-indigo-900 mr-3">编辑</a>
                            <a href="#" onclick="resetPassword({{ user.id }}, '{{ user.name }}')" class="text-yellow-600 hover:text-yellow-900 mr-3">重置密码</a>
                            {% if user.is_active %}
                            <a href="#" onclick="toggleUserStatus({{ user.id }}, '{{ user.name }}', false)" class="text-red-600 hover:text-red-900">禁用</a>
                            {% else %}
                            <a href="#" onclick="toggleUserStatus({{ user.id }}, '{{ user.name }}', true)" class="text-green-600 hover:text-green-900">启用</a>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="10" class="px-6 py-4 text-center text-sm text-gray-500">
                            暂无用户数据
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <!-- 分页控件 -->
        <div class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6">
            <div class="hidden sm:flex-1 sm:flex sm:items-center sm:justify-between">
                <div>
                    <p class="text-sm text-gray-700">
                        显示第 <span class="font-medium">{{ (page - 1) * per_page + 1 }}</span> 至 
                        <span class="font-medium">{{ min(page * per_page, total) }}</span> 项，
                        共 <span class="font-medium">{{ total }}</span> 项结果
                    </p>
                </div>
                <div>
                    <nav class="relative z-0 inline-flex rounded-md shadow-sm -space-x-px" aria-label="Pagination">
                        {% if page > 1 %}
                        <a href="{{ url_for('user_list', page=page-1, search=search, department_filter=department_filter, position_filter=position_filter, status_filter=status_filter, role_filter=role_filter) }}" class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">上一页</span>
                            <i class="fas fa-chevron-left"></i>
                        </a>
                        {% else %}
                        <span class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium text-gray-300 cursor-not-allowed">
                            <span class="sr-only">上一页</span>
                            <i class="fas fa-chevron-left"></i>
                        </span>
                        {% endif %}
                        
                        <!-- 页码 -->
                        {% for p in range(max(1, page-2), min(total_pages+1, page+3)) %}
                        {% if p == page %}
                        <span class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-primary text-sm font-medium text-white">
                            {{ p }}
                        </span>
                        {% else %}
                        <a href="{{ url_for('user_list', page=p, search=search, department_filter=department_filter, position_filter=position_filter, status_filter=status_filter, role_filter=role_filter) }}" class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50">
                            {{ p }}
                        </a>
                        {% endif %}
                        {% endfor %}
                        
                        {% if page < total_pages %}
                        <a href="{{ url_for('user_list', page=page+1, search=search, department_filter=department_filter, position_filter=position_filter, status_filter=status_filter, role_filter=role_filter) }}" class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-500 hover:bg-gray-50">
                            <span class="sr-only">下一页</span>
                            <i class="fas fa-chevron-right"></i>
                        </a>
                        {% else %}
                        <span class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium text-gray-300 cursor-not-allowed">
                            <span class="sr-only">下一页</span>
                            <i class="fas fa-chevron-right"></i>
                        </span>
                        {% endif %}
                    </nav>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 重置密码确认模态框 -->
<div id="reset-password-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-yellow-100">
                <i class="fas fa-key text-yellow-600"></i>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4">重置密码</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500">
                    确定要重置用户 <span id="reset-user-name" class="font-medium"></span> 的密码吗？
                </p>
                <p class="text-sm text-gray-500 mt-2">
                    重置后，新密码将发送到用户的邮箱。
                </p>
            </div>
            <div class="items-center px-4 py-3">
                <button id="confirm-reset-btn" class="px-4 py-2 bg-yellow-500 text-white text-base font-medium rounded-md w-24 mr-2 hover:bg-yellow-600 focus:outline-none focus:ring-2 focus:ring-yellow-300">
                    确定
                </button>
                <button onclick="closeResetPasswordModal()" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-24 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>

<!-- 状态切换确认模态框 -->
<div id="toggle-status-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full hidden z-50">
    <div class="relative top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white">
        <div class="mt-3 text-center">
            <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100">
                <i class="fas fa-exclamation-triangle text-red-600"></i>
            </div>
            <h3 class="text-lg leading-6 font-medium text-gray-900 mt-4" id="toggle-status-title">禁用用户</h3>
            <div class="mt-2 px-7 py-3">
                <p class="text-sm text-gray-500" id="toggle-status-message">
                    确定要禁用用户 <span id="toggle-user-name" class="font-medium"></span> 吗？
                </p>
            </div>
            <div class="items-center px-4 py-3">
                <button id="confirm-toggle-btn" class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-24 mr-2 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300">
                    确定
                </button>
                <button onclick="closeToggleStatusModal()" class="px-4 py-2 bg-gray-300 text-gray-800 text-base font-medium rounded-md w-24 hover:bg-gray-400 focus:outline-none focus:ring-2 focus:ring-gray-300">
                    取消
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{{ super() }}
<script>
    // 搜索功能
    document.getElementById('search-btn').addEventListener('click', function() {
        const searchValue = document.getElementById('search').value;
        const url = new URL(window.location.href);
        url.searchParams.set('search', searchValue);
        url.searchParams.set('page', '1'); // 重置到第一页
        window.location.href = url.toString();
    });

    // 搜索框回车事件
    document.getElementById('search').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            document.getElementById('search-btn').click();
        }
    });

    // 筛选功能
    document.getElementById('filter-btn').addEventListener('click', function() {
        const departmentFilter = document.getElementById('department-filter').value;
        const positionFilter = document.getElementById('position-filter').value;
        const statusFilter = document.getElementById('status-filter').value;
        const roleFilter = document.getElementById('role-filter').value;
        
        const url = new URL(window.location.href);
        url.searchParams.set('department_filter', departmentFilter);
        url.searchParams.set('position_filter', positionFilter);
        url.searchParams.set('status_filter', statusFilter);
        url.searchParams.set('role_filter', roleFilter);
        url.searchParams.set('page', '1'); // 重置到第一页
        window.location.href = url.toString();
    });

    // 重置筛选
    document.getElementById('reset-btn').addEventListener('click', function() {
        const url = new URL(window.location.href);
        url.searchParams.delete('department_filter');
        url.searchParams.delete('position_filter');
        url.searchParams.delete('status_filter');
        url.searchParams.delete('role_filter');
        url.searchParams.set('page', '1');
        window.location.href = url.toString();
    });

    // 全选/取消全选
    document.getElementById('select-all').addEventListener('change', function() {
        const checkboxes = document.querySelectorAll('.user-checkbox');
        checkboxes.forEach(checkbox => {
            checkbox.checked = this.checked;
        });
    });

    // 重置密码功能
    let currentUserId = null;

    function resetPassword(userId, userName) {
        currentUserId = userId;
        document.getElementById('reset-user-name').textContent = userName;
        document.getElementById('reset-password-modal').classList.remove('hidden');
    }

    function closeResetPasswordModal() {
        document.getElementById('reset-password-modal').classList.add('hidden');
        currentUserId = null;
    }

    document.getElementById('confirm-reset-btn').addEventListener('click', function() {
        if (currentUserId) {
            fetch(`/api/users/${currentUserId}/reset-password`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCsrfToken()
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showFlashMessage('密码重置成功！新密码已发送到用户邮箱。', 'success');
                } else {
                    showFlashMessage('密码重置失败：' + data.message, 'error');
                }
                closeResetPasswordModal();
            })
            .catch(error => {
                console.error('Error:', error);
                showFlashMessage('密码重置失败，请稍后重试。', 'error');
                closeResetPasswordModal();
            });
        }
    });

    // 状态切换功能
    let toggleUserId = null;
    let toggleUserActive = null;

    function toggleUserStatus(userId, userName, isActive) {
        toggleUserId = userId;
        toggleUserActive = isActive;
        document.getElementById('toggle-user-name').textContent = userName;
        
        if (isActive) {
            document.getElementById('toggle-status-title').textContent = '启用用户';
            document.getElementById('toggle-status-message').innerHTML = `确定要启用用户 <span class="font-medium">${userName}</span> 吗？`;
            document.getElementById('confirm-toggle-btn').className = 'px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md w-24 mr-2 hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300';
        } else {
            document.getElementById('toggle-status-title').textContent = '禁用用户';
            document.getElementById('toggle-status-message').innerHTML = `确定要禁用用户 <span class="font-medium">${userName}</span> 吗？`;
            document.getElementById('confirm-toggle-btn').className = 'px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md w-24 mr-2 hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-300';
        }
        
        document.getElementById('toggle-status-modal').classList.remove('hidden');
    }

    function closeToggleStatusModal() {
        document.getElementById('toggle-status-modal').classList.add('hidden');
        toggleUserId = null;
        toggleUserActive = null;
    }

    document.getElementById('confirm-toggle-btn').addEventListener('click', function() {
        if (toggleUserId !== null) {
            fetch(`/api/users/${toggleUserId}/status`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRFToken': getCsrfToken()
                },
                body: JSON.stringify({
                    is_active: toggleUserActive
                })
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showFlashMessage(`用户${toggleUserActive ? '启用' : '禁用'}成功！`, 'success');
                    location.reload(); // 刷新页面
                } else {
                    showFlashMessage(`用户${toggleUserActive ? '启用' : '禁用'}失败：` + data.message, 'error');
                }
                closeToggleStatusModal();
            })
            .catch(error => {
                console.error('Error:', error);
                showFlashMessage(`用户${toggleUserActive ? '启用' : '禁用'}失败，请稍后重试。`, 'error');
                closeToggleStatusModal();
            });
        }
    });

    // 导出用户功能
    function exportUsers() {
        const selectedCheckboxes = document.querySelectorAll('.user-checkbox:checked');
        if (selectedCheckboxes.length === 0) {
            if (!confirm('确定要导出所有用户数据吗？')) {
                return;
            }
        }
        
        const userIds = Array.from(selectedCheckboxes).map(cb => cb.value);
        const url = new URL('/api/users/export', window.location.origin);
        
        if (userIds.length > 0) {
            userIds.forEach(id => url.searchParams.append('user_ids', id));
        }
        
        // 添加筛选条件
        const search = document.getElementById('search').value;
        if (search) url.searchParams.set('search', search);
        
        const departmentFilter = document.getElementById('department-filter').value;
        if (departmentFilter) url.searchParams.set('department_filter', departmentFilter);
        
        const positionFilter = document.getElementById('position-filter').value;
        if (positionFilter) url.searchParams.set('position_filter', positionFilter);
        
        const statusFilter = document.getElementById('status-filter').value;
        if (statusFilter) url.searchParams.set('status_filter', statusFilter);
        
        const roleFilter = document.getElementById('role-filter').value;
        if (roleFilter) url.searchParams.set('role_filter', roleFilter);
        
        window.location.href = url.toString();
    }

    // 显示导入模态框
    function showImportModal() {
        showFlashMessage('批量导入功能正在开发中...', 'info');
    }

    // 获取CSRF令牌
    function getCsrfToken() {
        // 从meta标签中获取CSRF令牌
        const token = document.querySelector('meta[name="csrf-token"]');
        return token ? token.getAttribute('content') : '';
    }
</script>
{% endblock %}